import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Button, notification, DatePicker, Steps } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import FormList01 from './components/TaskRules';
import FormList02 from './components/BuildRules';
import FormList03 from './components/PersonRules';
import FormList04 from './components/TypeRules';
import styled from './task.less';

import {
  jbxx,
  jbxx2,
  scgz,
  scgz2,
  tjlc,
  tjlc2,
  tjry,
  tjry2,
  tjsb,
  tjsb2
} from './img_src.js'

const Step = Steps.Step;

interface Props extends FormComponentProps {
  dispatch?: Function,
    data?: {
      id: number
    }
}

@connect()
class FormItem extends Component<Props, any> {
  state = {
    index: 0,
    params: {},
    isFromShow0: true,
    isFromShow1: false,
    isFromShow2: false,
    isFromShow3: false
  };

  changeFromFn = () => {
    this.state.index ++;
    this.setState({
      index: this.state.index,
      isFromShow0: false,
      isFromShow1: false,
      isFromShow2: false,
      isFromShow3: false
    }, () => {
      this.setState({
        ['isFromShow'+this.state.index]: true
      })
    });
  };

  isOkNext01 = (data) => {
    if(!data){
      return;
    }
    this.state.params = { ...data };
    this.changeFromFn();
  };

  isOkNext02 = (data) => {
    if(!data){
      return;
    }
    this.setState({
      params: {
        ...this.state.params,
        targetList: data
      }
    });
    this.changeFromFn();
  };

  isOkNext03 = (data) => {
    if(!data){
      return;
    }
    this.setState({
      params: {
        ...this.state.params,
        users: data
      }
    });
    this.changeFromFn();
  };

  isOkNext04 = (data) => {
    if(!data){
      return;
    }
    let { dispatch } = this.props;
    this.state.params = { ...this.state.params, ...data };
    dispatch({
      type: 'unit_task_rules/create',
      payload: this.state.params
    });
  };

  goBack = (index) => {
    this.setState({
      index: index,
      isFromShow0: false,
      isFromShow1: false,
      isFromShow2: false,
      isFromShow3: false
    }, () => {
      this.setState({
        ['isFromShow'+index]: true
      })
    });
  };
  render() {
    let stephead = {'height': '30px', 'borderBottom': '1px solid #e1e6eb'};
    let stepUl = {'display': 'flex','justifyContent': 'center','alignItems': 'center', 'height': '160px', 'margin': '0', 'padding': '0'};
    let stepP = {'width': '66px'};
    let stepSpan = {'display': 'inlineBlock','width': '66px', 'height': '66px'};
    return (
      <div>
        <div className="rules-head">
          <Steps size="small" current={this.state.index}>
            <Step title="" />
            <Step title="" />
            <Step title="" />
            <Step title="" />
          </Steps>
        </div>
        <div className="step-box" style={
          {
            'width': '100%',
            'margin': '30px auto',
            'border': '1px solid #e1e6eb',
            'textAlign': 'center',
            'backgroundColor': '#f9fafc'
          }
        }>
          <div className="step-head" style={stephead}></div>
          <div className={styled.new_task}>
            <ul className="step-ul" style={stepUl}>
              <li data-index="1">
                <p className="icon" style={stepP}>
                  <img src={jbxx2} style={{...stepSpan}}></img>
                </p>
                <p style={{'fontSize': '18px'}}>基本信息</p>
              </li>
              <li data-index="2">
                <p className="icon" style={stepP}>
                  <img src={tjsb2} style={{...stepSpan}}></img>
                </p>
                <p style={{'fontSize': '18px'}}>添加楼层</p>
              </li>
              <li data-index="3">
                <p className="icon" style={stepP}>
                  <img src={tjry2} style={{...stepSpan}}></img>
                </p>
                <p style={{'fontSize': '18px'}}>添加人员</p>
              </li>
              <li data-index="4">
                <p className="icon" style={stepP}>
                  <img src={scgz2} style={{...stepSpan}}></img>
                </p>
                <p style={{'fontSize': '18px'}}>生成规则</p>
              </li>
            </ul>
          </div>
        </div>
        <div className="container">
          <FormList01 isShow={this.state.isFromShow0} isOkNext={this.isOkNext01} goBack={this.goBack}/>
          <FormList02 isShow={this.state.isFromShow1} isOkNext={this.isOkNext02} goBack={this.goBack}/>
          <FormList03 isShow={this.state.isFromShow2} isOkNext={this.isOkNext03} goBack={this.goBack}/>
          <FormList04 isShow={this.state.isFromShow3} isOkNext={this.isOkNext04} goBack={this.goBack}/>
        </div>
      </div>
    );
  }
}

const FormList = Form.create()(FormItem);
export default FormList;
